---
title: Tailwind CSS Dropdown - Components Library @David UI
description: Explore David UI's collection of dropdown menu examples that is perfect for enhancing the UI navigation and user experience of your web projects.
github: dropdown
prev: docs/html/chip
next: docs/html/footer
---

<ScriptLoader />

<InfoBadge />

# Tailwind CSS Dropdown
Choose from David UI's collection of dropdown examples designed to deliver your application's user experience faster. From simple dropdown menus to advanced configurations, we've got you covered.
Each example is built with accessibility and responsiveness in mind, making it easy to integrate into any project.

---

## Basic Dropdown
A simple dropdown menu with a trigger button. Contains basic menu items like "Add Team," "Add Project," and "My Profile." Ideal for straightforward navigation or quick actions.

<PreviewWithCode relativePath="dropdown/dropdown-demo.tsx" language="html" />

---

## Nested Dropdown
A dropdown menu with nested levels, allowing submenus for more detailed options. Features a right arrow icon indicating submenu expansion. Perfect for complex hierarchies or organized workflows.

<PreviewWithCode relativePath="dropdown/dropdown-nested.tsx" language="html" />

---

## Dropdown Placement
A versatile dropdown showcasing various placement options (top, bottom, left, right, and their variations). Demonstrates flexibility in positioning menus relative to the trigger button. Great for adaptive layouts or responsive designs.

<PreviewWithCode relativePath="dropdown/dropdown-placement.tsx" language="html" />

---

## Nav Dropdown Menu
A dropdown menu designed for navigation bars. Includes a mix of menu items and a promotional card for featured items. Features detailed descriptions and icons, making it suitable for navigation with additional context.

<PreviewWithCode relativePath="dropdown/dropdown-nav-menu.tsx" language="html" />

---

## Dropdown with Divider
A dropdown menu with a visual separator to group related items. Includes a "Logout" option styled distinctly in red for emphasis. Ideal for applications requiring logical separation between menu sections.

<PreviewWithCode relativePath="dropdown/dropdown-divider.tsx" language="html" />

---

## Dropdown with Checkbox
A dropdown menu incorporating checkboxes for multi-select functionality. Each menu item is selectable without closing the menu. Suitable for filters, sorting, or configuration settings.

<PreviewWithCode relativePath="dropdown/dropdown-checkbox.tsx" language="html" />

---

## Dropdown with Search
A dropdown menu with an integrated search bar at the top. Enables users to filter options dynamically before making a selection. Perfect for long lists or searchable menu content.

<PreviewWithCode relativePath="dropdown/dropdown-search.tsx" language="html" />

---

## Dropdown with Scrolling Content
A dropdown menu with scrollable content, handling long lists effectively. Displays up to 20+ items with a smooth scroll, ensuring usability in data-heavy scenarios.

<PreviewWithCode relativePath="dropdown/dropdown-scrolling.tsx" language="html" />

---

## Notification Dropdown Menu
A dropdown tailored for notifications. Features items with avatars, timestamps, and concise descriptions. Ideal for alerts, messages, or user activity summaries.

<PreviewWithCode relativePath="dropdown/dropdown-notification.tsx" language="html" />

---

## Profile Dropdown Menu
A dropdown menu styled for user profiles. Includes options like "My Profile," "Edit Profile," "Support," and "Logout." Features icons for visual cues and a divider for logical grouping. Perfect for user account settings or personal navigation.

<PreviewWithCode relativePath="dropdown/dropdown-profile.tsx" language="html" />

---

## Required Script

The Dropdown component in david-ai requires JavaScript to handle the dropdown functionality and positioning. The library provides smooth transitions and toggle behavior through data attributes, powered by Popper.js for accurate positioning.

### Installation

To use the Dropdown component in your project, you first need to install the `david-ai` library via npm:

<CodePreviewTailwindClasses codeSnippet={`npm install david-ai`}/>

### Basic Usage

<CodePreviewTailwindClasses codeSnippet={
`import { initDropdowns } from 'david-ai';

// Initialize dropdown functionality
initDropdowns();
`
}/>

### Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initDropdowns:

<CodePreviewTailwindClasses codeSnippet={
`import * as DavidAI from 'david-ai';

// Initialize dropdown functionality
DavidAI.initDropdowns();
`
}/>

### Using with CDN
You can include david-ai via a CDN and initialize dropdown functionality globally in the browser. Add the following script to your HTML file:

<CodePreviewTailwindClasses codeSnippet={`<script src="https://cdn.jsdelivr.net/gh/creativetimofficial/david-ai@1.0.4/packages/dist/david-ai.min.js" defer></script>`}/>

### HTML Code Example

<CodePreviewTailwindClasses codeSnippet={
`<div class="dropdown" data-dui-placement="bottom-start">
  <button data-dui-toggle="dropdown" 
          aria-expanded="false" 
          class="inline-flex items-center justify-center px-4 py-2 text-sm text-stone-50 bg-stone-800 hover:bg-stone-700 rounded-lg shadow-sm hover:shadow-md transition">
    Open
  </button>
  <div data-dui-role="menu" class="hidden mt-2 bg-white border border-stone-200 rounded-lg shadow-sm p-1 z-10">
    <a href="#" class="block px-4 py-2 text-sm text-stone-800 hover:bg-stone-100 rounded-md">Add Team</a>
    <a href="#" class="block px-4 py-2 text-sm text-stone-800 hover:bg-stone-100 rounded-md">Add Project</a>
    <a href="#" class="block px-4 py-2 text-sm text-stone-800 hover:bg-stone-100 rounded-md">My Profile</a>
  </div>
</div>`
}/>